<template>
  <div>
    <el-button type="small" @click="showAddDialog">新增放映厅</el-button>
    <el-table
        :data="list"
        style="width: 60%">
      <el-table-column
          align="center"
          label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="position"
          label="位置"
          width="180">
      </el-table-column>
      <el-table-column
          align="center"
          label="状态">
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="position"
          label="创建时间">
      </el-table-column>
      <el-table-column
          align="center"
          prop="position"
          width="400px"
          label="操作">
        <template slot-scope="scop">
          <el-tooltip :content="scop.row.status===0?'正常':'封禁'" placement="top">
            <el-switch
                style="margin-right: 20px"
                @change="updateStatus(scop.row)"
                v-model="scop.row.status"
                active-color="#ff4949"
                inactive-color="#13ce66"
                :active-value="1"
                :inactive-value="0">
            </el-switch>
          </el-tooltip>
          <el-button size="mini">历史放映记录</el-button>
          <el-button size="mini" @click="edit(scop.row)">编辑</el-button>
          <el-button size="mini" @click="del(scop.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Page style="text-align: center;width: 60%" method-name="roomPage" :page="page" @getList="getList"></Page>
    <el-dialog
        title="放映厅管理"
        :visible.sync="saveDialog"
        width="25%">
      <el-form :inline="true" :model="room" class="demo-form-inline">
        <el-form-item label="位置:">
          <el-input style="width: 350px" v-model="room.position" placeholder="请输入放映厅位置"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select v-model="room.type" placeholder="请选择类型">
            <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="room.status" placeholder="请选择状态">
            <el-option
                v-for="item in [{label:'启用',value:0},{label: '禁用',value: 1}]"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Page from "@/pages/common/Page";

export default {
  name: "PlayRoom",
  components: {Page},
  data() {
    return {
      saveDialog: false,
      room: {},
      typeList: [
        {
          label: "2D",
          value: "2D"
        }, {
          label: "3D",
          value: "3D"
        }, {
          label: "IMAX",
          value: "IMAX"
        }, {
          label: "4D",
          value: "4D"
        }
      ],
      list: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    async init() {
      const promise = await this.$baseApi.callPostMethod("roomPage", this.page);
      const data = promise.data
      if (data.code === 200) {
        this.list = data.data.records
        this.page.total = data.data.total
      }
    },
    showAddDialog() {
      this.room = {}
      this.saveDialog = true
    },
    getList(list) {
      this.list = list
    },
    async save() {
      const promise = await this.$baseApi.callPostMethod("saveRoom", this.room);
      const data = promise.data
      if (data.code === 200) {
        this.$message.success("保存成功！")
        this.room = {}
        await this.init()
        this.saveDialog = false
      } else {
        this.$message.error(data.msg)
      }
    },
    edit(room) {
      this.room = room
      this.saveDialog = true
    },
    async updateStatus(room) {
      const promise = await this.$baseApi.callPostMethod("updateRoomStatus", room);
      const data = promise.data
      if (data.code === 200) {
        this.$message.success("状态修改成功！")
        await this.init()
        this.saveDialog = false
      } else {
        this.$message.error(data.msg)
      }
    },
    async del(room) {
      room.status = 9
      const promise = await this.$baseApi.callPostMethod("updateRoomStatus", room);
      const data = promise.data
      if (data.code === 200) {
        this.$message.success("删除成功！")
        await this.init()
        this.saveDialog = false
      } else {
        this.$message.error(data.msg)
      }
    }
  },
  mounted() {
  },
}
</script>

<style scoped>

</style>